<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-center-center") 
                div(class="flex-row")
                    div(class="flex-row-item flex-7 flex-center-center") ---三餐量预设---
                    div(class="flex-row-item right") {{activeId+1}}
            div(class="flex-column-item flex-3")
                div(class="flex-row")
                  div(class="flex-row-item flex-6",style="height:100%")
                    div(class="flex-column")
                        div(class="flex-column",v-for="(menu,index) in currentPageMenus")
                            div(class="flex-row")
                                div(class="flex-row-item flex-5")
                                    span(class="iconfont",:style="{'visibility':  menu.id == activeId % 3 ? 'visible' : 'hidden'}") &#xe62c;
                                    span {{menu.name}}:
                                div(class="flex-row-item")
                                    control-amount(v-model="currentPageMenus[index]",:working="menu.working",:ref="'ref'+menu.id")
                                div(class="flex-row-item")
                                    span u
                                    
                  div(class="flex-row-item",style="height:100%")
                    control-line(:total="menus.length",:current="activeId",style="float:right")

</template>

<script>
    import MenuList from '@/mixins/MenuList';
    import ThreeMealsPreset from '@/model/ThreeMealsPreset'

    const presetHandler = new ThreeMealsPreset();

    export default {
        mixins: [MenuList],
        data() {
            return {
                menus: [
                    {
                        working: false,
                        name: "早餐量",
                        id: 0,
                        value: {name: window.dose.preset.breakfast, value: window.dose.preset.breakfast},
                        min: 0,
                        max: 20,
                        increment: 0.1,
                        unit: "U",
                        onChange(model) {
                            window.dose.preset.breakfast = model.value.value;
                        }
                    },
                    {
                        working: false,
                        name: "午餐量",
                        id: 1,
                        value: {name: window.dose.preset.lunch, value: window.dose.preset.lunch},
                        min: 0,
                        max: 20,
                        increment: 0.1,
                        unit: "U",
                        onChange(model) {
                            window.dose.preset.lunch = model.value.value;
                        }
                    },
                    {
                        working: false,
                        name: "晚餐量",
                        id: 2,
                        value: {name: window.dose.preset.dinner, value: window.dose.preset.dinner},
                        min: 0,
                        max: 20,
                        increment: 0.1,
                        unit: "U",
                        onChange(model) {
                            window.dose.preset.dinner = model.value.value;
                        }
                    }
                ],
                page: {maxResultCount: 3},
            };
        },
        computed:{
            currentRef(){
                return 'ref' + this.currentMenu.id;
            }
        },

        methods: {
            up() {
                if (this.currentMenu.working) {
                    this.$refs[this.currentRef][0].up();
                    return;
                } else 
                
                this.activeId --;
            },
            down() {
                if (this.currentMenu.working) {
                    this.$refs[this.currentRef][0].down();
                    return;
                } 

                this.activeId ++;
            },

            back() {
                if (!this.currentMenu.working) {
                    this.$router.push("/large-dose/menu?index=2");
                    return;
                }

                presetHandler.updatePresets();
                this.currentMenu.working = false;
            },
            yes() {
                this.currentMenu.working = !this.currentMenu.working;
            }
        },
        created() {
            this.active = this.menus[0];
        }
    };
</script>

<style lang="less">
</style>
